<!-- src/renderer/src/views/Dashboard.vue -->
<template>
  <div class="dashboard-container">
    <!-- 顶部导航栏 -->
    <div class="top-navbar">
      <div class="nav-left">
        <h1 class="system-title">纪检监察机关案件监督管理系统</h1>
      </div>
      <div class="nav-right">
        <el-button type="danger" @click="handleLogout" size="medium" >
          <el-icon><SwitchButton /></el-icon>
          退出登录
        </el-button>
      </div>
    </div>

       <!-- 红线放在导航外面，top:100% 紧贴在 .top-nav 下方 -->
    <div class="bottom-line"></div>
    <!-- 主内容区域 -->
    <div class="main-content">
      <div class="modules-grid">
        <!-- 案件管理 -->
        <el-card class="module-card" shadow="hover" @click="navigateTo('/cases')" style="background: linear-gradient(135deg, #6495ED 0%, #87CEEB 100%);">
          <div class="card-content">
            <div class="card-icon" style="background: rgba(255, 255, 255, 0.3);">
              <el-icon><Files /></el-icon>
            </div>
            <h3>案件管理</h3>
            <p>案件录入、查询、统计</p>
          </div>
        </el-card>

        <!-- 人员管理 -->
        <!-- <el-card class="module-card" shadow="hover" @click="navigateTo('/persons')">
          <div class="card-content">
            <div class="card-icon" style="background: #67c23a;">
              <el-icon><User /></el-icon>
            </div>
            <h3>人员管理</h3>
            <p>涉案人员信息管理</p>
          </div>
        </el-card> -->

        <!-- 证据管理 -->
        <!-- <el-card class="module-card" shadow="hover" @click="navigateTo('/evidences')">
          <div class="card-content">
            <div class="card-icon" style="background: #e6a23c;">
              <el-icon><Collection /></el-icon>
            </div>
            <h3>证据管理</h3>
            <p>证据材料归档管理</p>
          </div>
        </el-card> -->

        <!-- 统计分析 -->
        <!-- <el-card class="module-card" shadow="hover" @click="navigateTo('/analytics')">
          <div class="card-content">
            <div class="card-icon" style="background: #409eff;">
              <el-icon><DataAnalysis /></el-icon>
            </div>
            <h3>统计分析</h3>
            <p>数据统计与分析报表</p>
          </div>
        </el-card> -->

           <!-- 数据管理 -->
        <el-card class="module-card" shadow="hover" @click="navigateTo('/delieve')"  style="background: linear-gradient(135deg, #48D1CC 0%, #90EE90 100%);">
          <div class="card-content">
            <div class="card-icon" style="background: rgba(255, 255, 255, 0.3);">
              <el-icon><Share /></el-icon>
            </div>
            <h3>数据管理</h3>
            <p>数据导入导出</p>
          </div>
        </el-card>
        <!-- 系统设置 -->
        <el-card class="module-card" shadow="hover" @click="navigateTo('/settings')" style="background: linear-gradient(135deg, #8A2BE2 0%, #BA55D3 100%);">
          <div class="card-content">
            <div class="card-icon" style="background: rgba(255, 255, 255, 0.3);">
              <el-icon><Setting /></el-icon>
            </div>
            <h3>系统设置</h3>
            <p>本单位、下属单位信息配置</p>
          </div>
        </el-card>

     
      </div>
    </div>

    <!-- 底部技术支持信息 -->
    <div class="footer">
      <p>案件管理系统 业务指导：纪律检查委员会 | 技术支持: 信息技术所 </p>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { SwitchButton,Files,Share,Setting } from '@element-plus/icons-vue'

export default {
  name: 'Dashboard',
    components: {
    SwitchButton,
    Share,
    Files,
    Setting
  },
  setup() {
    const router = useRouter()
    const userInfo = ref({})
    const loading = ref(false)

    // 获取用户信息
    const getUserInfo = async () => {
      try {
        loading.value = true
        const sessionId = localStorage.getItem('sessionId')
        
        if (!sessionId) {
          throw new Error('未找到会话信息')
        }
        
        const result = await window.electronAPI.invoke('get-user-info', { sessionId })
        
        if (result.success) {
          userInfo.value = result
          console.log('用户信息获取成功:', result)
        } else {
          throw new Error(result.error)
        }
      } catch (error) {
        console.error('获取用户信息失败:', error)
        
        if (error.message.includes('会话无效') || error.message.includes('未找到会话信息')) {
          // 会话无效，跳转到登录页
          localStorage.removeItem('isAuthenticated')
          localStorage.removeItem('sessionId')
          router.push('/login')
          ElMessage.error('会话已过期，请重新登录')
        } else {
          ElMessage.error('获取用户信息失败: ' + error.message)
        }
      } finally {
        loading.value = false
      }
    }

    // 退出登录
    const handleLogout = async () => {
      try {
        await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        const sessionId = localStorage.getItem('sessionId')
        console.log('退出登录，会话ID:', sessionId?.substring(0, 8) + '...')
        
        const result = await window.electronAPI.invoke('auth-logout', { sessionId })
        
        if (result.success) {
          // 清除本地存储
          localStorage.removeItem('isAuthenticated')
          localStorage.removeItem('sessionId')
          
          // 跳转到登录页
          router.push('/login')
          ElMessage.success('已安全退出系统')
        } else {
          ElMessage.error('退出登录失败: ' + result.error)
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('退出登录失败:', error)
          ElMessage.error('退出登录失败')
        }
      }
    }

    // 导航到指定页面
    const navigateTo = (path) => {
      router.push(path)
    }

    onMounted(() => {
      console.log('Dashboard 组件挂载')
      getUserInfo()
    })

    onUnmounted(() => {
      console.log('Dashboard 组件卸载')
    })

    return {
      userInfo,
      loading,
      handleLogout,
      navigateTo
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); */
  background: url('./dashboard.jpg') no-repeat center center fixed;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* 顶部导航栏 */
.top-navbar {
  height: 60px;
  background: linear-gradient(90deg, #0052cc 0%, #0052cc 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.nav-left .system-title {
  color: white;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.nav-right .el-button {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
}

.nav-right .el-button:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

/* 主内容区域 */
.main-content {
  flex: 1;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 320px); /* 增大卡片宽度 */
  gap: 40px; /* 增大间距 */
  width: fit-content;
  margin: 0 auto;
  align-items: center;
  justify-items: center;
  padding: 30px;
}

.module-card {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  border-radius: 24px; /* 增大圆角 */
  width: 320px; /* 增大宽度 */
  height: 320px; /* 增大高度 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.module-card:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
}

.card-content {
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px; /* 增大间距 */
  padding: 30px; /* 增大内边距 */
  box-sizing: border-box;
}

.card-icon {
  width: 90px; /* 增大图标 */
  height: 90px; /* 增大图标 */
  border-radius: 24px; /* 增大圆角 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 36px; /* 增大字体 */
  background: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.card-content h3 {
  margin: 0;
  color: white;
  font-size: 24px; /* 增大标题字体 */
  font-weight: 700;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  line-height: 1.3;
  text-align: center;
  width: 100%;
}

.card-content p {
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  text-align: center;
  width: 100%;
}

/* 底部技术支持 */
.footer {
  height: 5%; /* 减少底部高度 */
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e4e7ed;
  margin-top: auto;
  padding: 0 10px;
}

.footer p {
  margin: 0;
  color: #8f8b8b; /* 深灰色 */
  font-size: 16px; /* 调大字体 */
  font-weight: bold; /* 加粗 */
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 1100px) {
  .modules-grid {
    grid-template-columns: repeat(2, 300px); /* 中等屏幕调整宽度 */
    width: fit-content;
    gap: 35px;
  }
  
  .module-card {
    min-height: 160px;
  }
  
  .card-icon {
    width: 60px;
    height: 60px;
    font-size: 28px;
  }
  
  .card-content h3 {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .modules-grid {
    grid-template-columns: 300px; /* 小屏幕调整宽度 */
    width: fit-content;
    gap: 25px;
  }
  
  .module-card {
    min-height: 140px;
  }
  
  .card-icon {
    width: 50px;
    height: 50px;
    font-size: 24px;
    border-radius: 15px;
  }
  
  .card-content h3 {
    font-size: 16px;
  }
  
  .card-content p {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .modules-grid {
    grid-template-columns: 1fr;
    gap: 12px; /* 进一步减少间距 */
    max-width: 280px;
  }
  
  .top-navbar {
    flex-direction: column;
    height: auto;
    padding: 12px;
    gap: 8px;
  }
  
  .nav-left, .nav-right {
    margin: 0;
  }
  
  .main-content {
    padding: 8px;
  }
  
  .module-card {
    height: 110px; /* 小屏幕进一步减少高度 */
  }
  
  .card-icon {
    width: 35px;
    height: 35px;
    font-size: 16px;
  }
  
  .card-content h3 {
    font-size: 15px;
  }
  
  .card-content p {
    font-size: 12px;
  }
}
/* 红线：放在 .top-navbar 正下方，紧贴底部 */
.bottom-line {
  position: absolute;
  top: 60px; /* 顶部导航栏的高度 */
  left: 0;
  width: 100%;
  height: 5px;   
  background-color: #d32f2f;
  z-index: 1001;
}
</style>